<template>
	<view>
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">


				<slot name="left"></slot>
				<view class="action"  @tap="BackPage" v-if="isBack && !home">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>


				<view class="action border-custom" v-if="isBack && home" :style="'width:'+Custom.width+'px;height:'+Custom.height+'px;margin-left:calc(750rpx - '+Custom.right+'px)'">
					<text class="cuIcon-back text-black"  @tap="BackPage" ></text>
					<slot name="backText"></slot>
					<!--<text class="cuIcon-home text-black" @tap="toHome" v-if="home" ></text>-->
					<text class="iconfont icon_home1 text-black text-bold" @tap="toHome" v-if="home" ></text>
				</view>
				<view class="content" :style="[{top:StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar+5,
				Custom   :this.Custom
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				if(this.StatusBar && this.CustomBar){
					var StatusBar= this.StatusBar;
					var CustomBar= this.CustomBar;
					var bgImage = this.bgImage;
					var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
					if (this.bgImage) {
						style = `${style}background-image:url(${bgImage});`;
					}
					return style
				}

			},
			CustomBarComputed(){
				if(!this.StatusBar){
					console.log('重新计算导航栏的一些高度值！！！！！');
					uni.getSystemInfo({
						success: function(e) {

							console.log('系统信息返回的结果是')
							console.log(e)
							Vue.StatusBar = e.statusBarHeight;
							if (e.platform == 'android') {
								Vue.CustomBar = e.statusBarHeight + 50;
							} else {
								Vue.CustomBar = e.statusBarHeight + 45;
							};
							// #ifdef MP-WEIXIN || MP-QQ
							Vue.prototype.StatusBar = e.statusBarHeight;
							let capsule = wx.getMenuButtonBoundingClientRect();
							if (capsule) {
								console.log('capsule')
								console.log(capsule)
								Vue.prototype.Custom = capsule;
								// Vue.prototype.capsuleSafe = uni.upx2px(750) - capsule.left + uni.upx2px(750) - capsule.right;
								Vue.prototype.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
							} else {
								Vue.prototype.CustomBar = e.statusBarHeight + 50;
							}
							// #endif

						}
					})
				}else{
					console.log('不用重新计算导航栏的一些高度值');
				}
			}
		},
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			},
			home:{
				type: [Boolean, String],
				default: false
			},
			backEvent:{
				type:Boolean,
				default:false
			}
		},
		methods: {
			BackPage() {
				if(this.backEvent){
					console.log('自定义后退事件yes');
					this.$emit('backEvent');
				}else{
					console.log('自定义后退事件false')
					if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {
						let url = '/' + __wxConfig.pages[0]
						return uni.redirectTo({url})
					}
					uni.navigateBack({
						delta: 1
					});
				}


			},
			toHome(){
				console.log("跳转到首页")
				this.$tools.goTo('/pages/index/index',true);
			}
		}
	}
</script>

<style>

</style>
